<template>
  <div>
    <h3>组合式Api使用</h3>
    <!-- vue在对模板进行编译时，会自动补上.value属性 -->
    <div>{{ count }}</div>
    <button @click="addCount">+++++++</button>
    <hr />
    <input v-model="username" />
  </div>
</template>

<script>
// 声明响应式数据  ref / reactive
// ref声明的是一个响应式数据，此数据它会是一个对象，其对象中的.value就是声明的值
// ref可以声明任意类型的数据
import { ref } from 'vue'

export default {
  setup() {
    // 普通的值,它不具备响应式
    // let count = 100
    // const它声明的变量是一个常量不能直接去修改，但是如果声明的值是一个对象，可以修改其属性值
    const count = ref(100)
    const username = ref('admin')

    // 方法也是写在setup函数中
    const addCount = () => {
      count.value++
    }

    return {
      count,
      addCount,
      username
    }
  }
}
</script>

<style lang="scss"></style>
